<template>
	<ul class="right-list-container">
		<li v-for="(item, index) in list" :key="index">
			<span class="hv">
				<span :class="{ active: item.isSelect }" @click="handleClickSpan(item)">{{ item.name }}</span>
				<span class="aside" :class="{ active: item.isSelect }" @click="handleClickSpan(item)">
					{{ item.aside }}
				</span>
			</span>
			<right-list :list="item.children" @select="handleClickSpan"></right-list>
		</li>
	</ul>
</template>

<script>
export default {
	name: 'RightList',
	emits: ['select'],
	props: {
		// [{name:'xxx', isSelect:true , children:[{name":'xxx', isSelect:false}]}]
		list: {
			type: Array,
			default() {
				return []
			},
		},
	},
	methods: {
		handleClickSpan(item) {
			if (!item.isSelect) {
				this.$emit('select', item)
			}
		},
	},
}
</script>

<style lang="less" scoped>
@import '~@/styles/basic/var.less';
.right-list-container {
	& li {
		padding: 0;
		min-height: 30px;
		line-height: 30px;
		font-size: 14px;
		list-style: none;
		& span {
			cursor: pointer;
		}
		& span.active {
			color: @warn;
		}
		& .hv:hover {
			transition: all 0.3s;
			color: @warn;
		}
	}
	& li li {
		margin-left: 1em;
	}
}
.aside {
	font-size: 12px;
	margin-left: 1em;
	color: @gray;
}
</style>
